<template>
  <div class="login_container">
    <div class="login_box">
<!--      头像区域-->
      <div class="avatar_box">
        <img src="../assets/logo.png"alt="标准图案">
      </div>
<!--      登录表单区域-->
<!--      ref设置实例对象-->
      <el-form ref="loginFormRef" :model="loginForm"
               :rules="loginFormRules" label-width="0px" class="login_form">
<!--        用户名-->
        <el-form-item label="" prop="username">
          <el-input v-model='loginForm.username' prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
<!--        密码-->
        <el-form-item label="" prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-unlock"type="password"></el-input>
        </el-form-item>
<!--        按钮区域-->
        <el-form-item label=""class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return{
        //这是登录表单的数据绑定对象
        loginForm:{
          username:'admin',
          password:'123456'
        },
        //这是表单的验证规则对象
        loginFormRules:{
          //验证用户名是否合法
          username:[
              //必填项-提示消息-触发条件
            {required: true, message: '请输入登录名',trigger:'blur'},
            {min:3,max:10,message:'长度在3到5个字符',trigger:'blur'}
          ],
          //验证密码是否合法
          password:[
            {required: true, message: '请输入登录密码',trigger:'blur'},
            {min:6,max:15,message:'长度在6到15个字符',trigger:'blur'}
          ]
        }
      }
    },
    methods:{
      resetLoginForm(){
        // console.log(this);
        this.$refs.loginFormRef.resetFields();
      },
      login(){
        this.$refs.loginFormRef.validate(async valid => {
          // console.log(valid);
          if(!valid)return;
          //通过async和await异步操作，简化promise方法
          //通过花括号解构出所需要的data中的data,并为之命名为res
          const {data:res} = await this.$http.post('login',
              this.loginForm);
          if(res.meta.status != 200)
            return this.$message.error('登录失败！');
          this.$message.success('登陆成功！');
          /*1.将登陆成功之后的token保存到客户端的sessionStorage中
             1.1项目中除了登陆之外的其他API接口，必须在登陆之后才能访问
             1.2token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
           2.通过编程式导航跳转到后台主页，路由地址是/home*/
          // console.log(res);
          //将token保存到sessionStorage
          window.sessionStorage.setItem('token',res.data.token);
          //通过编程式导航跳转到后台主页，路由地址是/home
          this.$router.push('/home');

        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .login_container{
    background-color:#2b4b6b;
    height:100%;
  }

  .login_box{
    width:450px;
    height:300px;
    background-color: #fff;
    border-radius:20px;/*圆角边框*/
    position:absolute;/*绝对定位，向右向下偏移50%*/
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);/*横轴、纵轴向反方向移动50%*/
    .avatar_box{
      height:130px;
      width:130px;
      border:1px solid #eee;
      border-radius: 50%;/*边框加圆角*/
      padding:10px;
      box-shadow:0 0 10px cadetblue;/*为外边框增加阴影 向外扩散10px*/
      position:absolute;
      left:50%;
      transform:translate(-50%,-50%);
      background-color:#fff;
      img{
        width:100%;
        height:100%;
        border-radius: 50%;/*图片加圆角*/
        background-color:#eee;
      }
    }
  }

  .login_form{
    position:absolute;
    bottom:0;
    width: 100%;
    padding:10px;
    box-sizing: border-box;/*表单的表格自动适应盒子*/
  }

  .btns{
    display:flex;/*弹性模型*/
    justify-content:flex-end;/*尾部对齐*/
  }
</style>